<template>
	<view class="page">
		<view class="product-num">共{{product_list.length}}件商品</view>
		<u-line></u-line>
		<view class="product-list">
			<view class="product-item" v-for="item,index in product_list" :key="item._id">
				<image class="banner" :src="item.image" mode="aspectFill"></image>
				<view style="display: flex;justify-content: space-between;flex-grow: 1;">
					<view
						style="display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;">
						<view class="over-hide">
							<view>{{item.title}}</view>
						</view>
						<view style="color: #999999;font-size: 26rpx;">{{item.classification_name}}</view>
						<view style="color: #E93323;font-size: 30rpx;">￥{{item.price}}</view>
					</view>
					<view class="number"> × {{ type === 'sku' ? number : item.number}}</view>
				</view>
			</view>
		</view>

		<view class="sumbuit-info">
			<view class="sumbuit-title">
				备注说明
			</view>
			<u--textarea v-model="remarks" placeholder="填写备注信息,100字以内" maxlength="100"></u--textarea>
		</view>

		<view class="all-price">
			<view class="all-price-title">
				商品总价：
			</view>
			<view class="right">
				￥{{all_price}}
			</view>
		</view>

		<view class="bottom-height"></view>
		<view class="bottom">
			<view class="bottom-left">
				合计:<span style="color: #E93323;">￥{{all_price}}</span>
			</view>
			<view @click="sumbitOrder" class="bottom-btn">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

			let {
				type,
				number,
				product_id,
				price
			} = options
			this.type = type
			this.product_id_list = this.gerUrl(product_id).split(',')
			this.price = price || 0
			this.number = Number(number) || 0;

			type == 'sku' ? this.getProductList() : this.getCarList();

		},
		computed: {
			all_price() {
				let all_price
				const price = this.product_list.reduce((per, cur) => {
					return per + cur.price * cur.number
				}, 0)

				this.type === 'sku' ? all_price = this.number * this.price : all_price = price

				return (all_price).toFixed(2)
			},
		},
		data() {
			return {
				product_id_list: [],
				product_list: [],
				number: 0,
				type: 'sku',
				price: 0,
				remarks: ""
			}
		},
		methods: {
			sumbitOrder() {
				console.log(this.product_list)
				vk.callFunction({
					url: '/client/pages/order/kh/create_order',
					title: '创建订单中...',
					data: {
						product_list: this.product_list,
						remarks: this.remarks,
						type: this.type
					},
				}).then((res) => {
					console.log('订单创建',res)
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})

					setTimeout(() => {
						if (res.all_price === 0) {
							uni.redirectTo({
								url: `/pages/order/order_pay_status/order_pay_status?out_trade_no=${res.out_trade_no}`
							})
						} else {
							uni.redirectTo({
								url: `/pages/order/order_pay/order_pay?out_trade_no=${res.out_trade_no}`,
							})
						}
						// return

					}, 1500)
				});
			},
			gerUrl(url) {
				console.log("开始递归", url)
				if (url.indexOf('%') < 0) {
					return url
				} else {
					const newUrl = decodeURIComponent(url)
					return this.gerUrl(newUrl)
				}
			},
			async getProductList() {
				console.log('product_id_list', this.product_id_list)
				let res = await vk.callFunction({
					url: 'client/pages/product/pub/get_product_list',
					title: '请求中...',
					data: {
						product_id_list: this.product_id_list
					}
				});

				res.data[0].number = this.number
				res.data[0].merchandise_id = res.data[0]._id
				this.product_list = res.data
			},
			async getCarList() {
				console.log('product_id_list', this.product_id_list)
				let res = await vk.callFunction({
					url: 'client/pages/shopcart/kh/get_shopcart_list',
					title: '请求中...',
					data: {
						product_id_list: this.product_id_list
					}
				});

				this.product_list = res.data
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #F5F5F5;
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}

	.bottom-height {
		height: calc(130rpx + env(safe-area-inset-bottom));
	}

	.product-num {
		padding: 30rpx;
		font-size: 28rpx;
		background-color: white;
	}

	.product-list {
		background-color: white;

		.product-item {
			padding: 30rpx;
			display: flex;

			.banner {
				width: 160rpx;
				height: 160rpx;
				border-radius: 5rpx;

				margin-right: 20rpx;
			}

			.over-hide {
				font-size: 28rpx;
				width: 300rpx; //宽度
				height: 80rpx;
				display: flex;
				align-items: center;

				view {

					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					align-items: center;
					-webkit-box-orient: vertical; //上下垂直

					-webkit-line-clamp: 2; //自定义行数
				}
			}

			.number {
				color: #959595;

			}
		}
	}

	.sumbuit-info,
	.all-price {
		padding: 30rpx;
		background-color: white;
		margin-top: 20rpx;

		.sumbuit-title {
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}
	}

	.all-price {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.right {
			color: #868686;
		}
	}

	.bottom {
		z-index: 2;
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;

		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;

		.bottom-left {
			font-size: 30rpx;
		}

		.bottom-btn {
			background-color: #E93323;
			color: white;
			border-radius: 40rpx;
			width: 250rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 30rpx;
		}
	}
</style>